import React from 'react';
import {message, Modal, Row, Tooltip, Transfer} from 'antd';
import {connect} from 'umi';
import {ConnectState} from '@/models/connect';
import {addUserRole, deleteRoleUser, getAllUserByProject} from '@/services/information';
import './style.less'
import {getSubStr, sortByProps, sortString} from "@/utils/common";

interface EditPersonProps {
  onCancel: () => void,
  visible: boolean,
  row: any
}

class EditPerson extends React.Component<EditPersonProps> {
  vData = {
    selected: [1],//userId,逗号隔开
    users: [
      {
        "id": 1,
        "username": "linjicong", //通行证
        "name": "林吉聪",
        "department": "组织结构/卓越教育集团/集团总部/互联网管理中心/数字化平台部/研发组",
        "projects": "海星报表",//多个项目以逗号隔开
        "createBy": "林达键",
        "createTime": "2020-11-09 20:05:07"
      },
      {
        "id": 2,
        "username": "linjicong2", //通行证
        "name": "河西刚",
        "department": "组织结构/卓越教育集团/集团总部/互联网管理中心/数字化平台部/研发组",
        "projects": "海星报表",//多个项目以逗号隔开
        "createBy": "林达键",
        "createTime": "2020-11-09 20:05:07"
      },
      {
        "id": 3,
        "username": "linjicong3", //通行证
        "name": "安妮 ",
        "department": "组织结构/卓越教育集团/集团总部/互联网管理中心/数字化平台部/研发组",
        "projects": "海星报表",//多个项目以逗号隔开
        "createBy": "林达键",
        "createTime": "2020-11-09 20:05:07"
      },
    ]
  }

  state = {
    leftData: [],
    rightKeys: [],
    rightData: [],
  };

  componentDidMount() {
    this.getUserByProject()
  }

  handleChange = (rightKeys, direction, userIds) => {
    console.log(rightKeys, direction, userIds)
    this.setState({rightKeys});
    let data = {roleId: this.props.row.id, userIds}
    console.log(data)
    if (direction === 'right') {
      addUserRole(data).then(resp => {
        const{header,payload}=resp
        if(header&&header.code===200){
          message.success('保存成功')
        }
      })
    } else {
      deleteRoleUser(data).then(resp => {
        const{header,payload}=resp
        if(header&&header.code===200){
          message.success('保存成功')
        }
      })
    }
  };

  renderFooter = () => null
  // <Button size="small" style={{ float: 'right', margin: 5 }} onClick={this.getMock}>
  //   reload
  // </Button>

  getUserByProject = () => {
    const {selected, users} = this.vData
    let leftData = users.map(item => ({...item, key: item.id, label: getSubStr(item.department, 5, 12, 10)}))
      .sort((a, b) => sortString(a, b, 'name'))
    this.setState({rightKeys: selected, leftData})
    let projectId = this.props.row.projectId
    if (projectId) {
      getAllUserByProject({projectId}).then(resp => {
        console.log('getUserByProject',resp)
      })
    }
  }

  renderItem = item => {
    const label = <> {item.name}
      <Tooltip title={item.department}>
        <div className={'showDepartment'}>
          {item.label}
        </div>
      </Tooltip>
    </>
    return {
      label,
      value: item.name
    };
  };


  render() {
    return <Modal
      width={800}
      bodyStyle={{padding: '32px 40px 48px'}}
      destroyOnClose
      title="成员列表"
      visible={this.props.visible}
      onOk={this.props.onCancel}
      onCancel={this.props.onCancel}
    >
      <Row>
        <strong>
          {this.props.row.projects}
        </strong>
      </Row>
      <Transfer
        dataSource={this.state.leftData}
        showSearch
        listStyle={{
          width: 400,
          height: 500,
        }}
        targetKeys={this.state.rightKeys}
        onChange={this.handleChange}
        render={item => this.renderItem(item)}
        footer={this.renderFooter}
      />
    </Modal>;
  }
}

export default connect(({}: ConnectState) => ({}))(EditPerson);
